<script setup lang='ts' name="add-car">
import type { Options } from '@splidejs/vue-splide'

import { Splide, SplideSlide } from '@splidejs/vue-splide'
import { cloneDeep } from 'lodash-es'
import { ref, toRefs } from 'vue'

import SkuPrice from './sku-price.vue'

const props = defineProps<{
    data?: any
}>()

const { data } = toRefs(props)

const activeSku = ref<any>(null)
const main = ref<InstanceType<typeof Splide>>()
const thumbs = ref<InstanceType<typeof Splide>>()

const mainOptions: Options = {
    arrows: false,
    isNavigation: false,
    pagination: false,
    perMove: 1,
    perPage: 1,
    // type: 'loop',
    // type: 'fade',
}

const thumbsOptions: Options = {
    autoplay: true,
    cover: true,
    fixedHeight: 150,
    fixedWidth: 150,
    focus: 'center',
    gap: '10px',
    isNavigation: true,
    pagination: false,
    rewind: true,
    type: 'slide',
    updateOnMove: true,
}

const activePrice = computed(() => {
    const { productPrice } = data.value
    return activeSku.value ?? productPrice ?? ''
})

const imgs = computed(() => {
    return data.value?.productImage ? data.value?.productImage.split(';') : []
})

const skuList = computed(() => {
    const target = {
        skuAttr: data.value?.skuAttr ?? [],
        skuList: data.value?.skuList ?? [],
    }
    return target
})

function itemClick(val: any) {
    activeSku.value = val
}

function getPrice(str: string) {
    if (!str)
        return '询价'

    return str !== '询价' ? `¥${str.replace('-', ' ~ ¥')}` : str
}

function init() {
    const thumbsSplide = thumbs.value?.splide

    if (thumbsSplide)
        main.value?.sync(thumbsSplide)
}

onMounted(() => {
    init()
})
</script>

<template>
    <div class="flex justify-between">
        <div class="mb-10 w-600">
            <Splide ref="main"
                    aria-labelledby="thumbnail-example-heading"
                    :options="mainOptions"
            >
                <SplideSlide v-for="(item, index) in imgs"
                             :key="index"
                >
                    <img class="mb-10 h-600 w-full"
                         :src="item"
                    >
                </SplideSlide>
            </Splide>

            <Splide ref="thumbs"
                    aria-label="The carousel with thumbnails. Selecting a thumbnail will change the main carousel"
                    :options="thumbsOptions"
            >
                <SplideSlide v-for="(item, index) in imgs"
                             :key="index"
                >
                    <img :src="item">
                </SplideSlide>
            </Splide>
        </div>

        <div class="w-660">
            <p class="mb-9 text-24 c-#1D2129 font-600 lh-38">
                {{ data?.productName ?? '' }}
            </p>

            <p class="pb-26 mb-30 border-b-1 border-#D8D8D8 text-30 c-#DA0004 font-600">
                {{ getPrice(activePrice) }}
            </p>

            <div class="pd-desc text-16 c-#767676">
                <el-row>
                    <el-col :span="5">
                        产品品牌：
                    </el-col>

                    <el-col :span="19">
                        {{ data?.brand?.brandName }}
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="5">
                        所属公司：
                    </el-col>

                    <el-col :span="19">
                        {{ data?.enterprise?.name }}
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="5">
                        产品描述：
                    </el-col>

                    <el-col :span="19">
                        {{ data?.productHighlights }}
                    </el-col>
                </el-row>

                <!-- 选择产品属性 获取报价 -->
                <SkuPrice :data="skuList"
                          @item-click="itemClick"
                />

                <!-- <el-row>
                    <el-col :span="4">
                        选择数量：
                    </el-col>

                    <el-col :span="20">
                        <el-input-number v-model="num"
                                         :disabled="true"
                        />

                        <span class="ml-16 text-14 c-#86909C relative top-7">300个起订</span>
                    </el-col>
                </el-row> -->
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.splide__track--nav > .splide__list > .splide__slide.is-active {
    border-color: red;
}

.pd-desc {
    .el-row {
        margin-bottom: 30px;

        .el-col-20 {
            color: #1d2129;
        }
    }

    .el-row:nth-child(4),
    .el-row:nth-child(5) {
        margin-bottom: 14px;
    }
}
</style>
